<template>
  <div v-if="userColumn.length > 0" class="setting-column" v-loading="isSave">
    <div class="setting-column__title">
      <span class="move_b"></span>
      <span class="show_b">显示</span>
      <span class="name_b">名称</span>
      <span class="width_b">宽度</span>
      <span class="sortable_b">排序</span>
      <span class="fixed_b">固定</span>
    </div>
    <div class="setting-column__list" ref="list">
      <ul>
        <li v-for="item in userColumn" :key="item.prop">
          <span class="move_b">
            <el-tag class="move" style="cursor: move;">
              <el-icon-d-caret style="width: 1em; height: 1em;"/>
            </el-tag>
          </span>
          <span class="show_b">
            <el-switch v-model="item.hide" :active-value="false" :inactive-value="true"></el-switch>
          </span>
          <span class="name_b" :title="item.prop">{{ item.label }}</span>
          <span class="width_b">
            <el-input v-model="item.width" placeholder="auto" size="small"></el-input>
          </span>
          <span class="sortable_b">
            <el-switch v-model="item.sortable"></el-switch>
          </span>
          <span class="fixed_b">
            <el-switch v-model="item.fixed"></el-switch>
          </span>
        </li>
      </ul>
    </div>
    <div class="setting-column__bottom">
      <el-button @click="backDefault" :disabled="isSave">重置</el-button>
      <el-button @click="save" type="primary">保存</el-button>
    </div>
  </div>
  <el-empty v-else description="暂无可配置的列" :image-size="80"></el-empty>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted } from 'vue';
import Sortable from 'sortablejs';

interface ColumnItem {
  prop: string;
  label: string;
  width: string | number;
  hide: boolean;
  sortable: boolean;
  fixed: boolean;
}

const props = defineProps<{
  column: ColumnItem[];
}>();

const emit = defineEmits<{
  (e: 'userChange', userColumn: ColumnItem[]): void;
  (e: 'back', userColumn: ColumnItem[]): void;
  (e: 'save', userColumn: ColumnItem[]): void;
}>();

const isSave = ref(false);
const userColumn = ref<ColumnItem[]>(JSON.parse(JSON.stringify(props.column || [])));

watch(
  userColumn,
  () => {
    emit('userChange', userColumn.value);
  },
  { deep: true }
);

onMounted(() => {
  if (userColumn.value.length > 0) {
    rowDrop();
  }
});

const rowDrop = () => {
  const list = document.querySelector('.setting-column__list ul');
  if (list) {
    // Sortable.create(list, {
    //   handle: '.move',
    //   animation: 300,
    //   ghostClass: 'ghost',
    //   onEnd({ newIndex, oldIndex }) {
    //     const currRow = userColumn.value.splice(oldIndex, 1)[0];
    //     userColumn.value.splice(newIndex, 0, currRow);
    //   }
    // });
  }
};

const backDefault = () => {
  emit('back', userColumn.value);
};

const save = () => {
  emit('save', userColumn.value);
};
</script>

<style scoped>
.setting-column {}

.setting-column__title {
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 15px;
}
.setting-column__title span {
  display: inline-block;
  font-weight: bold;
  color: #909399;
  font-size: 12px;
}
.setting-column__title .move_b {
  width: 30px;
  margin-right: 15px;
}
.setting-column__title .show_b,
.setting-column__list .show_b {
  width: 60px;
}
.setting-column__title .name_b,
.setting-column__list .name_b {
  width: 140px;
}
.setting-column__title .width_b,
.setting-column__list .width_b {
  width: 60px;
  margin-right: 15px;
}
.setting-column__title .sortable_b,
.setting-column__list .sortable_b {
  width: 60px;
}
.setting-column__title .fixed_b,
.setting-column__list .fixed_b {
  width: 60px;
}

.setting-column__list {
  max-height: 314px;
  overflow: auto;
}
.setting-column__list li {
  list-style: none;
  margin: 10px 0;
  display: flex;
  align-items: center;
}
.setting-column__list li > span {
  display: inline-block;
  font-size: 12px;
}
.setting-column__list li .move_b {
  width: 30px;
  margin-right: 15px;
}
.setting-column__list li .name_b {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: default;
}
.setting-column__list li.ghost {
  opacity: 0.3;
}

.setting-column__bottom {
  border-top: 1px solid #ebeef5;
  padding-top: 15px;
  text-align: right;
}

.dark .setting-column__title {
  border-color: var(--el-border-color-light);
}
.dark .setting-column__bottom {
  border-color: var(--el-border-color-light);
}
</style>
